import React, { Component } from 'react';
import { connect } from 'react-redux'
import styles from './css/CSSAnimation.module.css';
import { rgbaTransfer } from './js/color.js';
class CSSAnimation extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ifLoading:true,
            loadingPercent:0,
            loadImgColor:'#2D8DFB',
            pageBgColor:'#2D8DFB',
            loadingMsg:'授权成功',
            red:'#FF0000'
        };
    }
    componentDidMount(){
      this.startLoading()
    }
    startLoading = ()=>{
      let timer=setInterval(() => {
        const loadingPercent = this.state.loadingPercent + 1;
        if (loadingPercent > 100) {
            clearInterval(timer);
            timer = null
            this.endLoading();
        } else {
          this.setState({
            loadingPercent
          })
        }
      }, 50);
    }
    endLoading= ()=>{
      console.log('加载完毕');
      this.setState({
        ifLoading:false,
      })
    } 
    render() {
        return (
            <div className={styles.container}>
                <p>CSSAnimation</p>
                <div className={styles.example}>
                <div className={`${styles.tac}`} style={{ height: `300px`}}>
                {
                  this.state.ifLoading?<div key="1" className={`${styles.flex_wrapper} ${styles.relative}`}>
                  <div className={`${styles.loading_wrapper} ${styles.flex_wrapper} ${styles.relative}`}>
                    <div className={`${styles.relative} ${styles.left_line}`}
                    style={{ background:  this.state.loadImgColor }}></div>
                    <div className={`${styles.middle_circle} ${styles.relative}`}
                    style={{ 'borderColor':  this.state.loadImgColor }}>
                      <div index={0} className={`${styles.z6} ${styles.center_text} ${styles.absolute} ${styles.flex_wrapper}`}>
                        <span style={{ color:  this.state.loadImgColor }}>{ this.state.loadingPercent}%</span>
                      </div>
                      <div index={1} className={`${styles.ovh} ${styles.wrapper_circle_big} ${styles.absolute}`}>
                        <div className={`${styles.absolute} ${styles.circle_big} ${styles.circle_big_top}`} style={{ 'borderTopColor':  this.state.loadImgColor,
                        'borderLeftColor':  this.state.loadImgColor }}></div>
                      </div>
                      <div index={2} className={`${styles.ovh} ${styles.absolute} ${styles.wrapper_circle_big} ${styles.wrapper_circle_big_bottom}`}>
                        <div className={`${styles.absolute} ${styles.b0} ${styles.circle_big} ${styles.circle_big_bottom}`}
                        style={{ 'borderBottomColor':  this.state.loadImgColor,
                        'borderRightColor':  this.state.loadImgColor }}></div>
                      </div>
                      <div index={3} className={`${styles.z5} ${styles.ovh} ${styles.absolute} ${styles.wrapper_circle_small}`}>
                        <div className={`${styles.circle_small_top} ${styles.absolute} ${styles.circle_small}`}
                        style={{ 'borderTopColor': rgbaTransfer( this.state.loadImgColor,
                        0.9), 'borderLeftColor': rgbaTransfer( this.state.loadImgColor, 0.9) }}></div>
                      </div>
                      <div index={4} className={`${styles.z5} ${styles.ovh} ${styles.absolute} ${styles.wrapper_circle_small} ${styles.wrapper_circle_small_bottom}`}>
                        <div className={`${styles.b0} ${styles.absolute} ${styles.circle_small} ${styles.circle_small_bottom}`}
                        style={{ 'borderBottomColor':rgbaTransfer( this.state.loadImgColor, 0.9),
                        'borderRightColor': rgbaTransfer( this.state.loadImgColor, 0.9) }}></div>
                      </div>
                      <div index={5} className={`${styles.z1} ${styles.absolute} ${styles.three_lines}`}>
                        <div className={`${styles.z2} ${styles.line1_three} ${styles.absolute} ${styles.b0}`} style={{ background:  this.state.loadImgColor }}></div>
                        <div className={`${styles.z2} ${styles.line2_three} ${styles.absolute} ${styles.b0}`} style={{ background:  this.state.loadImgColor }}></div>
                        <div className={`${styles.z2} ${styles.line3_three} ${styles.absolute} ${styles.b0}`} style={{ background:  this.state.loadImgColor }}></div>
                      </div>
                      <div index={6} className={`${styles.z2} ${styles.absolute} ${styles.fan_borders} ${styles.fan_borders1}`} style={{ 'borderRightColor': rgbaTransfer( this.state.loadImgColor,
                      0.5) }}>
                        <div className={`${styles.absolute} ${styles.dot1}`} style={{ background:  this.state.loadImgColor }}></div>
                        <div className={`${styles.absolute} ${styles.dot2}`} style={{ background:  this.state.loadImgColor }}></div>
                        <div className={`${styles.fan_inner_border} ${styles.fan_inner_border1}`} style={{ 'borderRightColor': rgbaTransfer( this.state.loadImgColor,
                        0.9) }}>
                        </div>
                      </div>
                      <div index={7} className={`${styles.z3} ${styles.absolute} ${styles.fan_borders} ${styles.fan_borders2}`} style={{ 'borderRightColor': rgbaTransfer( this.state.loadImgColor,
                      0.3) }}>
                        <div className={`${styles.absolute} ${styles.dot1}`} style={{ background:  this.state.loadImgColor }}></div>
                        <div className={`${styles.absolute} ${styles.dot2}`} style={{ background:  this.state.loadImgColor }}></div>
                        <div className={`${styles.fan_inner_border} ${styles.fan_inner_border2}`} style={{ 'borderRightColor': rgbaTransfer( this.state.loadImgColor,
                        0.7) }}>
                        </div>
                      </div>
                      <div index={8} className={`${styles.z4} ${styles.absolute} ${styles.fan_borders} ${styles.fan_borders3}`} style={{ 'borderRightColor': rgbaTransfer( this.state.loadImgColor,
                      0.1) }}>
                        <div className={`${styles.absolute} ${styles.dot1}`} style={{ background:  this.state.loadImgColor }}></div>
                        <div className={`${styles.absolute} ${styles.dot2}`} style={{ background:  this.state.loadImgColor }}></div>
                        <div className={`${styles.fan_inner_border} ${styles.fan_inner_border3}`} style={{ 'borderRightColor': rgbaTransfer( this.state.loadImgColor,
                        0.5) }}>
                        </div>
                      </div>
                    </div>
                    <div className={`${styles.relative} ${styles.right_line}`}
                    style={{ background:  this.state.loadImgColor }}></div>
                  </div>
                </div>:
                <div key="2" className={`${styles.finished}`}>
                  <svg type="ios-checkmark-outline" size="115" xmlns="http://www.w3.org/2000/svg"
                  width="115" height="115" viewBox="0 0 512 512" className="finished-inner vux-x-icon vux-x-icon-ios-checkmark-outline"
                  style={{ fill:  this.state.loadImgColor }}><path d="M340.1 177.3L215.3 303l-47.2-47.2-17.8 17.8 56 56c2.5 2.5 5.9 4.5 8.9
                  4.5s6.3-2 8.8-4.4l133.7-134.4-17.6-18z"></path><path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208
                  208-93.1 208-208S370.9 48 256 48zm0 398.7c-105.1 0-190.7-85.5-190.7-190.7 0-105.1 85.5-190.7 190.7-190.7 105.1 0
                  190.7 85.5 190.7 190.7 0 105.1-85.6 190.7-190.7 190.7z"></path></svg>
                  <p className={`${styles.fz18}`} style={{ color:  this.state.loadTipColor }} >{  this.state.loadingMsg }</p>
                </div>
                }
              </div>
            </div>
          </div>
        )
    }

}

export default connect()(CSSAnimation);